<template>
  <view>
    <view class="block">
      <view class="content">
        <view class="orderinfo">
          <view class="row">
            <view class="nominal">订单编号:</view>
            <view class="text">{{ order_sn }}</view>
          </view>
          <view class="row">
            <view class="nominal">订单金额:</view>
            <view class="text">{{ amount }}元</view>
          </view>
        </view>
      </view>
    </view>
    <view class="block">
      <view class="title">选择支付方式</view>
      <view class="content">
        <view class="pay-list">
          <view class="row" @tap="paytype = 'wxpay'">
            <view class="left"><u-icon name="weixin-circle-fill" color="#00c760" size="66"></u-icon></view>
            <view class="center">微信支付</view>
            <view class="right"><radio :checked="paytype == 'wxpay'" color="#f06c7a" /></view>
          </view>
        </view>
      </view>
    </view>
    <view class="pay"><view class="btn" @tap="doDeposit">立即支付</view></view>
    <u-toast ref="uToast" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      id: null, // 订单ID
      amount: 0,
      order_sn: '',
      paytype: 'wxpay' //支付类型
    };
  },
  onLoad(options) {
    this.id = options.id || 1;
    // 获取订单数据
    this.$api.get({
      url: 'order/order/detail',
      data: {
        id: this.id
      },
      success: res => {
        let data = res.data;
        this.amount = data.order_amount;
        this.order_sn = data.order_sn;
      }
    });
  },
  methods: {
    doDeposit() {
      // #ifdef  H5
      uni.showLoading();
      let ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        // 公众号支付
        this.$api.pay({
          url: 'wx_pay/index/jsapi',
          data: {
            order_id: this.id,
            user_id: this.$store.state.user.id
          },
          success: res => {
            if (res.code == 1) {
              let wxpay = typeof res.data == 'string' ? JSON.parse(res.data) : res.data;
              if (typeof WeixinJSBridge == 'undefined') {
                if (document.addEventListener) {
                  document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(wxpay), false);
                } else if (document.attachEvent) {
                  document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(wxpay));
                  document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(wxpay));
                }
              } else {
                return this.onBridgeReady(wxpay);
              }
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          },
          complete: () => {
            uni.hideLoading();
          }
        });
      } else {
        // H5支付
        this.$api.pay({
          url: 'wx_pay/index/h5',
          data: {
            order_id: this.id,
            user_id: this.$store.state.user.id
          },
          success: res => {
            if (res.code == 1) {
              uni.redirectTo({
                url: '../h5Pay/h5Pay?src=' + res.data
              });
            } else {
              this.$refs.uToast.show({
                title: res.msg,
                type: 'error'
              });
            }
          },
          complete: () => {
            uni.hideLoading();
          }
        });
      }
      return;
      // #endif

      // #ifdef MP-WEIXIN
      // 小程序支付
      uni.showLoading();
      this.$api.pay({
        url: 'wx_pay/index/mpPay',
        data: {
          order_id: this.id
        },
        success: res => {
          let wxpay = res.data;
          uni.requestPayment({
            provider: 'wxpay',
            timeStamp: wxpay.timeStamp,
            nonceStr: wxpay.nonceStr,
            package: wxpay.package,
            signType: wxpay.signType,
            paySign: wxpay.paySign,
            success: e => {
              this.$refs.uToast.show({
                title: '支付成功',
                type: 'success',
                callback: () => {
                  uni.redirectTo({
                    url: '../../order/orderDetail?id=' + this.id
                  });
                }
              });
            },
            fail: e => {
              this.$refs.uToast.show({
                title: '支付失败',
                type: 'error'
              });
            }
          });
        },
        complete: () => {
          uni.hideLoading();
        }
      });
      // #endif

      // #ifdef APP-PLUS
      // APP支付
      uni.showLoading();
      this.$api.pay({
        url: 'wx_pay/index/appPay',
        data: {
          order_id: this.id
        },
        success: res => {
          if (res.code == 1) {
            uni.requestPayment({
              provider: 'wxpay',
              orderInfo: res.data,
              success: e => {
                this.$refs.uToast.show({
                  title: '支付成功',
                  type: 'success',
                  callback: () => {
                    uni.redirectTo({
                      url: '../../order/orderDetail?id=' + this.id
                    });
                  }
                });
              },
              fail: e => {
                this.$refs.uToast.show({
                  title: '支付失败',
                  type: 'error'
                });
              }
            });
          } else {
            this.$toast(res.data.return_msg);
          }
        },
        complete: () => {
          uni.hideLoading();
        }
      });
      // #endif
    },
    onBridgeReady(wxpay) {
      WeixinJSBridge.invoke(
        'getBrandWCPayRequest',
        {
          appId: wxpay.appId,
          timeStamp: wxpay.timeStamp,
          nonceStr: wxpay.nonceStr,
          package: wxpay.package,
          signType: wxpay.signType,
          paySign: wxpay.paySign
        },
        res => {
          if (res.err_msg == 'get_brand_wcpay_request:ok') {
            this.$refs.uToast.show({
              title: '支付成功',
              type: 'success',
              callback: () => {
                uni.redirectTo({
                  url: '../../order/orderDetail?id=' + this.id
                });
              }
            });
            return true;
          } else {
            //支付失败
            this.$refs.uToast.show({
              title: '支付失败',
              type: 'error'
            });
          }
          return false;
        }
      );
    }
  }
};
</script>

<style lang="scss">
.block {
  width: 94%;
  padding: 0 3% 40upx 3%;
  .title {
    width: 100%;
    font-size: 34upx;
  }
  .content {
    .orderinfo {
      width: 100%;
      border-bottom: solid 1upx #eee;
      .row {
        width: 100%;
        height: 90upx;
        display: flex;
        align-items: center;
        .nominal {
          flex-shrink: 0;
          font-size: 32upx;
          color: #7d7d7d;
        }
        .text {
          width: 70%;
          margin-left: 10upx;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 32upx;
        }
      }
    }
    .pay-list {
      width: 100%;
      border-bottom: solid 1upx #eee;
      .row {
        width: 100%;
        height: 120upx;
        display: flex;
        align-items: center;
        .left {
          width: 100upx;
          flex-shrink: 0;
          display: flex;
          align-items: center;
          image {
            width: 80upx;
            height: 80upx;
          }
        }
        .center {
          width: 100%;
          font-size: 30upx;
        }
        .right {
          width: 100upx;
          flex-shrink: 0;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
.pay {
  margin-top: 20upx;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .btn {
    width: 70%;
    height: 80upx;
    border-radius: 80upx;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    background-color: #f06c7a;
    box-shadow: 0upx 5upx 10upx rgba(0, 0, 0, 0.2);
  }
  .tis {
    margin-top: 10upx;
    width: 100%;
    font-size: 24upx;
    display: flex;
    justify-content: center;
    align-items: baseline;
    color: #999;
    .terms {
      color: #5a9ef7;
    }
  }
}
</style>
